<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本编辑区示例</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            max-width: 800px;
            background-color: #f5f5f5;
        }
        .text-editor {
            margin: 20px 0;
        }
        .editor-label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #333;
        }
        #content {
            width: 100%;
            min-height: 200px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            line-height: 1.5;
            resize: vertical; /* 允许垂直调整大小 */
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
            transition: border-color 0.3s;
        }
        #content:focus {
            border-color: #4a90e2;
            outline: none;
            box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
        }
        .char-count {
            text-align: right;
            color: #666;
            font-size: 14px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="text-editor">
    <label for="content" class="editor-label">编辑您的文本内容：</label>
    <textarea
            id="content"
            class="editor-box"
            placeholder="请输入您的内容..."
            spellcheck="true"
            aria-label="文本编辑区域"
    >据国家移民管理局通报，今年“五一”假期全国边检机关共保障1089.6万人次中外人员出入境，日均217.9万人次，较去年“五一”假期增长28.7%，单日出入境通关最高峰出现在5月3日，达229.7万人次。
其中：内地居民出入境577.8万人次，较去年同期增长21.2%港澳台居民出入境400.3万人次，较去年同期增长37.1%外国人出入境111.5万人次，较去年同期增长43.1%入境外国人中，适用免签政策入境38万人次，较去年同期增长72.7%。
</textarea>
    <div class="char-count">
        <span id="counter">0</span>/1000 字符
    </div>
</div>

<script>
    // 实时字符计数功能
    const textarea = document.getElementById('content');
    const counter = document.getElementById('counter');

    textarea.addEventListener('input', function() {
        counter.textContent = this.value.length;

        // 超过800字符提示
        if(this.value.length > 800) {
            counter.style.color = '#e74c3c';
        } else {
            counter.style.color = '#666';
        }
    });


     function changeFontStyle() {
      console.log('6666' + document.documentElement.clientWidth)
      return document.documentElement.clientWidth;
   }

    // 初始化计数
    counter.textContent = textarea.value.length;
</script>
</body>
</html>